{extend name="public:m_base" /}
{block name='header'}
<style>

    .work li span{
        position: absolute;
        bottom: 10px;
        right: 6px;
    }
    .work li .p222{
        position: absolute;
        top: 145px;
        text-align: center;
        display: block;
        width: 100%;
    }
    .work li .p111{
        position: absolute;
        top: 136px;
        text-align: center;
        display: block;
        width: 100%;
    }
    .work li{
        width: 30%;

        height:164px;
        margin:0 1%;
        margin-top:14px;
        position: relative;
    }
    .work{
        font-size: 0.2rem;
    }
    .work a{
        height: 110px;
    }

    .work img{
        max-width:100%;
    }
    /* 本例子css */
    .picFocus{ margin:0 auto;  width:100%; padding:5px;  position:relative;  overflow:hidden;  zoom:1;   }
    .picFocus .hd{ width:100%; padding-top:5px;  overflow:hidden; }
    .picFocus .hd ul{ margin-right:-5px;  overflow:hidden; zoom:1; }
    .picFocus .hd ul li{ padding-top:5px; float:left;  text-align:center;  }
    .picFocus .hd ul li img{ width:109px; height:65px; border:2px solid #ddd; cursor:pointer; margin-right:5px;   }
    .picFocus .hd ul li.on{ background:url("/upload/picture/icoUp.gif") no-repeat center 0; }
    .picFocus .hd ul li.on img{ border-color:#f60;  }
    .picFocus .bd li{ vertical-align:middle; }
    .picFocus .bd img{ width:100%; height:auto; display:block;  }
    .photo_show{
        width:370px;
        height:370px;
        position: absolute;
        border:1px solid #ccc;
        display: none;
    }
    .atlp{
        margin-top: 8px;
        font-size: 0.7rem;
    }
    .atlp span{
        font-size: 0.7rem;
        margin-right:10px;}
    .atlsright p{
        padding: 15px 35px !important;
    }
    .atlsright{
        float: left;
    }
    .atlsleft{
        font-size: 12px;
        text-align: right;
        padding-top: 6px;    float: right;
    }
    .atlsll span{
        color: #ccc !important;
    }
    .atlsll{
        color: #ccc;
        font-size: 12px;
        margin-top: 5px;
    }
    .artistBig1{
        width: 85px !important;
        float: left;
    }
    .artistBig1 img{
        width: 85px !important;
        height: 85px !important;
    }
    .work img{
        width:96%;
    }
    .work a{
        height:90px;
    }
    .work span{
        font-size:14px;
    }
    .picFocus .hd ul li img{
        width: 67px;
        height: 40px;
    }

    .work li .p222{
        position: absolute;
        top: 145px;
        text-align: center;
        display: block;
        width: 100%;
    }
    .work li .p111{
        position: absolute;
        top: 136px;
        text-align: center;
        display: block;
        width: 100%;
    }
</style>
{/block}
{block name="main"}
<!--<div class="ShareAnySeparate"></div>-->
<div class="ShareAnyContainer" style="font-size: 0.8rem">
    当前位置：<a href="{:url('shop/index/index')}" title="首页">首页</a>&nbsp;&nbsp;/&nbsp;&nbsp;
    <a href="{:url('/shop/artwork/group')}" title="艺术品">艺术品</a>&nbsp;&nbsp;/&nbsp;&nbsp;
    <a href="{:url('/shop/artwork/group/',['id'=>$artwork['group_id']])}/" title="">    {$artwork['getgroup']['title']}
    </a>
</div>
<div class="ShareAnySeparate"></div>
<div class="ShareAnyContainer">
            <td valign="top" style="width:100%; padding-right:20px;">

                <div class="picFocus">
                    <div class="bd">
                        <ul>
                            {volist name="imgs" id="carousel"}
                            <li>
                                <a href="{$carousel}">
                                    <img src="/{$carousel['path']}" class="photo"/></a>
                            </li>
                            {/volist}

                        </ul>
                    </div>

                    <div class="hd" style="display: none;">
                        <ul>
                            {volist name="imgs" id="carousel"}
                            <li><img src="/{$carousel['path']}"/></li>
                            {/volist}
                        </ul>
                    </div>

                </div>
                <div class="photo_show"></div>
                <p style="font-size: 20px;margin-top: 10px;">{$artwork['title']}

                    <span style="float:right;">
                    {notempty name='user'}
                    {if condition="$love"}
                    <a href="javascript:follow({$artwork['id']},1);" style="    font-size: 14px;">取消关注</a>
                    {else /}
                    <a href="javascript:follow({$artwork['id']},0);">
                        <img src="__MODULE_IMG__/fav.png"></a>
                    {/if}
                    {else/}
                    <a href="javascript:alert('请先登陆');">
                        <!--<a href="/shop/account/login/?redirect=artwork/detail/id//">-->
                        <img src="__MODULE_IMG__/fav.png">
                    </a>
                    {/notempty}
                    </span>
                    <span style="float:right;">
                        {notempty name='user'}
                            {if condition="$artwork['type'] == 1"}<!--一口价-->
                            <a href="{:url('Order/index',array('artwork_id'=>$artwork['id']))}">
                                <img src="__MODULE_IMG__/buy.png">
                            </a>
                            {else /}
                                {if condition = "strtotime($artwork['start_time']) > time()"}
                                <a href="javascript:alert('拍卖尚未开始');">
                                    <img src="__MODULE_IMG__/auction_now.jpg">
                                </a>
                                {elseif condition = "strtotime($artwork['endtime']) > time()"}
                                <a href="javascript:auction();">
                                    <img src="__MODULE_IMG__/auction_now.jpg">
                                </a>
                                {else /}
                                <a href="javascript:alert('拍卖已经结束');">
                                    <img src="__MODULE_IMG__/auction_now.jpg">
                                </a>
                                {/if}
                            {/if}
                        {else/}
                        <a href="{:url('/shop/login/index')}" ><!---onclick="alert('请先登录')"-->
                                <img src="__MODULE_IMG__/buy.png">
                            </a>
                        {/notempty}
                    </span>
                </p>

                <p class="atlsll">浏览次数:<span style="margin-right:20px;font-weight: bold;">{$artwork['read_count']}</span>关注收藏:<span style="margin-right:20px;font-weight: bold;">{$artwork['love_count']}</span></p>
                <p class="atlp">
                {if condition="isset($artwork['getartist']['name'])"}
                    作者:<span >{$artwork['getartist']['name']}</span>
                {/if}
                    {if condition="isset($artwork['material'])"}
                材料:<span >{$artwork['material']}</span>
                {/if}
                <!--</p>-->
                <!--<p class="atlp">-->
                {if condition="isset($artwork['rongliang'])"}
                容量:<span >{$artwork['rongliang']}</span>
                {/if}

                {if condition="isset($artwork['juanke'])"}
                镌刻:<span >{$artwork['juanke']}</span>
                {/if}
                <!--</p>-->
                <!--<p class="atlp">-->
                    {if condition="isset($artwork['gongyi'])"}
                    工艺:<span >{$artwork['gongyi']}</span>
                    {/if}

                    {if condition="isset($artwork['size'])"}
                    尺寸:<span >{$artwork['size']}</span>
                    {/if}
                <!--</p>-->
                <!--<p class="atlp">-->
                    {if condition="isset($artwork['year'])"}
                    年代:<span >{$artwork['year']}</span>
                    {/if}
                <!--</p>-->
                <!--<p class="atlp">-->
                {if condition="isset($artwork['showtime'])"}
                    开展时间:<span >{$artwork['showtime']}</span>
                {/if}
                </p>

                <div style="margin-top:12px;">
                    <div  class="atlsright">
                        {notempty name='user'}
                        {if condition="$artwork['type'] == 1"}<!--一口价-->

                        <p style="    font-size: 0.9em; padding:15px; text-align: center; color:#676767;">售价：
                        <?php if($artwork['price'] == 0): ?>
                        拨打收藏专线询价
                        <?php else: ?>
                        ￥{$artwork['price']}
                        <?php endif; ?>
                        </p>
                        {else /}

                        {/if}


                        {else /}
                        <p style="    font-size: 0.6em;background-color: #eee; padding:15px; text-align: center; color:#ff0000;">登录后显示价格</p>
                        {/notempty}
                    </div>
                    <div class="atlsleft">
                        收藏专线：<span >400 666 7899</span>

                        <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a>
                            <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                            <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                            <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                            <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>


                <div style="padding:0px; border:0px solid #ccc;">
                    <volist name="" id="">
                        <!--<p>曲哥哥 ** 出价 ￥ 10000</p>-->
                    </volist>
                </div>

                <br>
                <p>

                <script>window._bd_share_config = {
                    "common": {
                        "bdSnsKey": {},
                        "bdText": "",
                        "bdMini": "2",
                        "bdPic": "",
                        "bdStyle": "0",
                        "bdSize": "16"
                    }, "share": {}
                };
                with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
                </p>
</div>

<div class="ShareAnySeparate"></div>
<div class="ShareAnyContainer">
    <div class="line"></div>
</div>
<div class="ShareAnySeparate"></div>
<div class="ShareAnyContainer">
    <div class="titleBig">
        作品描述
    </div>
</div>
<div class="ShareAnySeparate"></div>
<div class="ShareAnyContainer">
    {$artwork['about']}
</div>
<div class="ShareAnySeparate"></div>
<div class="ShareAnyContainer">
    <div class="line"></div>
</div>
<div class="ShareAnySeparate"></div>
<div class="ShareAnyContainer">
    <div class="titleBig">
        艺术家
    </div>
</div>
<div class="ShareAnySeparate"></div>
<div class="ShareAnyContainer">
    <div class="ShareAnyLeft artistBig1">
        <a href="/artist/detail/?id=">
            <img src="/{$artwork['getartist']['getimgpath']['path']}">
        </a>
    </div>
    <div class="ShareAnyLeft" style="float: right;margin-top: 10px;line-height: 30px;width:200px;">
        <p style="font-size: 16px; font-weight: bold;">{$artwork['getartist']['name']}</p>

        <p>{$artwork['getartist']['location']}</p>

        <p>{$artwork['getartist']['title']}</p>
    </div>
    <div style="clear:both;"></div>
    <div class="ShareAnyLeft" style="line-height: 22px;    font-size: 14px; width:100%;margin-top: 10px;">
        {$artwork['getartist']['resume']}
    </div>
    <div class="ShareAnyClear"></div>
</div>
<div class="ShareAnySeparate"></div>
<div class="ShareAnyContainer">
    <div class="line"></div>
</div>
<div class="ShareAnySeparate"></div>

<div class="ShareAnyContainer">
    <div class="work_parent">
        <div class="work">

            <ul>
                {volist name="list" id="artwork"}
                <li>
                    <a href="{:url('shop/artwork/detail',['id'=>$artwork['id']])}/">
                        <img src="/{$artwork['img']['0']}">
                        <p class="clbl p111">{$artwork['title']|mb_substr=###,0,18,'utf-8'}</p>
                        <p class="clbl p222">作者：{$artwork['getartist']['name']}</p>

                    </a>
                </li>
                {/volist}
            </ul>

        </div>
        <div class="ShareAnyClear"></div>
    </div>
</div>


{/block}
{/block}

{block name="footer"}
<script>
    function auction() {
        var price = "1000";
        if(confirm("您将出价 ￥" + price)){
            if (price) {
                if (parseFloat(price) <= parseFloat("10000")) {
                    alert("您的出价低于当前价格");
                }
                else {
                    $.ajax({
                        url: "/auction/ajaxAuction/",
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            price: price,
                            artwork: "1"
                        },
                        success: function (data) {
                            alert(data.message);
                            if (data.code == "1") {
                                window.location.reload();
                            }
                            if (data.code == "2") {
                                window.location.href = "www.baidu.com";
                            }

                        }
                    });
                }
            }
        }

    }
    function follow(artworkid,del) {
        $.ajax({
            url: "/shop/artwork/ajaxFollow/",
            type: "POST",
            dataType: "JSON",
            data: {
                id: artworkid,
                del: del
            },
            success: function (data) {
                alert(data.message);
                if (data.code == "1") {
                    window.location.reload();
                }
            }
        });
    }

    function getCostTime(second){
        var string1 = "";
        if(second%(60*60*24*365)>0){
            string1 += parseInt(second/(60*60*24*365)) + "年";
            second = second % (60*60*24*365);
        }
        if(second%(60*60*24)>0){
            string1 += parseInt(second/(60*60*24)) + "天";
            second = second%(60*60*24);
        }
        if(second%(60*60)>0){
            string1 += parseInt(second/(60*60)) + "小时";
            second = second%(60*60);
        }
        if(second%(60)>0){
            string1 += parseInt(second/(60)) + "分";
            second = second%(60);
        }
        string1 += parseInt(second) + "秒";
        return string1;



    }


    $(document).ready(function(){
        var timeNow = parseInt("100");
        var timeAuction = parseInt("1000");
        setInterval(function(){
            timeNow = timeNow + 1;
            if(timeNow<timeAuction){
                var time = timeAuction - timeNow;
                $("#last").html("，还剩"+getCostTime(time));
            }
        }, 1000);

    });


</script>
<script type="text/javascript">jQuery(".picFocus").slide({ mainCell:".bd ul",effect:"left",autoPlay:true });</script>
<script>
    (function ($) {
        window.magnifier = function (basePhotoClass, showPhotoClass, scale) {
            var basePhoto = $("." + basePhotoClass);
            var showPhoto = $("." + showPhotoClass);
            var showWidth = showPhoto.width();
            var showHeight = showPhoto.height();;

            // basePhoto.each(function(){
            //     $(this).parent().css("width", $(this).width() + "px");
            //     $(this).parent().css("height", $(this).height() + "px");
            // });

            // basePhoto.parent().css("position", "relative");

            // basePhoto.css("position", "absolute");
            // basePhoto.css("cursor", "pointer");
            showPhoto.css("background-repeat", "no-repeat");

            showPhoto.hide();

            basePhoto.on("mouseout", function (e) {
                showPhoto.hide();
            });

            basePhoto.on("mousemove", function (e) {
                var thisLeft = e.pageX - $(this).offset().left;
                var thisTop = e.pageY - $(this).offset().top;
                var thisWidth = $(this).width();
                var thisHeight = $(this).height();
                var showBackgroundWidth = thisWidth * scale;
                var showBackgroundheight = thisHeight * scale;
                var backgroundPositionLeft = (showWidth / 2 - thisLeft * scale);
                var backgroundPositionTop = (showHeight / 2 - thisTop * scale);

                if (backgroundPositionLeft > 0) {
                    backgroundPositionLeft = 0;
                }
                if (backgroundPositionLeft < (showWidth - showBackgroundWidth)) {
                    backgroundPositionLeft = (showWidth - showBackgroundWidth);
                }
                if (backgroundPositionTop > 0) {
                    backgroundPositionTop = 0;
                }
                if (backgroundPositionTop < (showHeight - showBackgroundheight)) {
                    backgroundPositionTop = (showHeight - showBackgroundheight);
                }

                showPhoto.css("background-position", backgroundPositionLeft + "px " + backgroundPositionTop + "px");
                showPhoto.css("background-size", showBackgroundWidth + "px " + showBackgroundheight + "px");
                showPhoto.css("background-image", "url(" + $(this).attr("src") + ")");
                showPhoto.show();
            });

        };
    })(jQuery);

    $(window).load(function () {
        window.magnifier("photo", "photo_show", 2);
    });
</script>
{/block}